<!--  -->
<template>
<div class='create-poster'>
    <div class="poster-img">
        <img :src="postImg" alt="">
    </div>
    <vue-qr  :logoSrc="logo" :text="textdesc" :size="200" ref="logo" style="display:none"></vue-qr>
    <div class="poster-canvas">
        <canvas ref="poseterCanvas" style="display:none"></canvas>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import VueQr from 'vue-qr'
import logo from '@/assets/logo.png'
export default {
//import引入的组件需要注入到对象中才能使用
components: {VueQr},
data() {
//这里存放数据
return {
    logo:logo,
    textdesc:'http://127.0.0.1:8888/#/goodsdetail',
    qrCode:'',
    postImg:''
};
},
props:['posterMessage'],
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    createCanvas(){
       let c = this.$refs.poseterCanvas//获取canvas dom元素
      //创建画布
      var ctx=c.getContext("2d");
    //   设置画布的宽高
        //window.devicePixelRatio//设备像素比
        // window.screen.availHeight 可用的高度不包含状态栏（状态栏指的是信号栏那一块)
        // window.screen.availWidth 可用宽度
        c.width = window.devicePixelRatio * window.screen.availWidth;
        c.height = window.devicePixelRatio * window.screen.availHeight;
        // 设置画布的颜色
        //         createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

        // 对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

        // R - 红色（0-255）
        // G - 绿色（0-255）
        // B - 蓝色（0-255）
        // A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）
        var imgData=ctx.createImageData(c.width,c.height);
        for (var i=0;i<imgData.data.length;i+=4)
        {
            imgData.data[i+0]=255;
            imgData.data[i+1]=255;
            imgData.data[i+2]=255;
            imgData.data[i+3]=255;
        }
        // putImageData讲图像数据放回到画布上
        ctx.putImageData(imgData,0,0);
        //   插入数据 
        // 插入图片
        let goods_img = this.posterMessage.goods_img;
        console.log('goods_img',goods_img)
        // 生成img标签
        let img = new Image();
        img.src = goods_img
        console.log('img',img);
        // 向画布上绘制图像、画布或视频 drawImage()
        img.onload = function(){
            ctx.drawImage(img,10,10,c.width*1 - 20,c.height/2)
        }
        console.log('宽度',c.width)
        // 绘制商品名称
        let goods_name = this.posterMessage.goods_name;
        ctx.font="30px Arial";
        ctx.fillStyle  = '#333333'
        ctx.fillText(goods_name.slice(0,25),20,c.height/2+50);
        ctx.fillText(goods_name.slice(30,80)+'...',20,c.height/2+100);
        // 绘制价格
        let goods_price = this.posterMessage.goods_price;
        ctx.font="40px Arial";
        ctx.fillStyle  = '#ff534c'
        ctx.fillText('￥'+ goods_price,20,c.height/2+180)
        // 绘制二维码
        // 生成img标签
        let imgQr = new Image();
        imgQr.src = this.qrCode;
        console.log('this.qrCode',this.qrCode)
        // 向画布上绘制图像、画布或视频 drawImage()
        imgQr.onload = function(){
            ctx.drawImage(imgQr,c.width/2-100,c.height/2+260,200,200)
        }
        setTimeout(()=>{
            this.postImg = c.toDataURL()
        },1000)
        


    }
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    
    // console.log(this.$refs.logo)
    setTimeout(()=>{
        this.qrCode = this.$refs.logo.imgUrl
        this.createCanvas();
    },2000)
    
    
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.create-poster{
    position: absolute;
    z-index:999;
    width:100%;
    height:100%;
    top: 0;
    left: 0;
    background: rgb(0, 0, 0,0.2);
    .poster-img{
        width:80%;
        height:80%;
        background: #fff;
        position: absolute;
        left:10%;
        top:10%;
        img{
            width:100%;
        }
    }
    .poster-canvas{
        
    }
}
</style>